<template>
  <div>
    <!-- 面包屑  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>维修管理</el-breadcrumb-item>
      <el-breadcrumb-item>修理厂</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入内容" v-model="query">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addShop">添加维修厂</el-button>
        </el-col>
      </el-row>

      <template>
        <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%">
          <el-table-column
              fixed
              prop="id"
              label="id"
          >
          </el-table-column>
          <el-table-column
              prop="name"
              label="维修厂名称"
          >
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
          >
          </el-table-column>
          <el-table-column
              prop="phoneNum"
              label="联系电话"
          >
          </el-table-column>
          <el-table-column
              prop="addtime"
              label="加入时间"
          >
          </el-table-column>
          <el-table-column
              prop="remark"
              label="备注"
          >
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="160">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit"  size="medium" circle @click="editShop(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete"  size="medium" circle @click="deleteShop(scope.row)"></el-button>
              <!--              <el-button type="success" icon="el-icon-s-tools" size="medium"  circle @click="AssignRoleToUser(scope.row)"></el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </template>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>

    <!--修改信息-->
    <el-dialog
        :title="title"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="closeClear">
      <el-form :model="shopEditFormData" status-icon :rules="shopEditFormRules" ref="shopEditRuleForm" label-width="100px">
        <el-form-item label="修理厂名称" prop="name">
          <el-input type="text" v-model="shopEditFormData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="修理厂地址" prop="address">
          <el-input type="text" v-model="shopEditFormData.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNum">
          <el-input type="text" v-model="shopEditFormData.phoneNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="text" v-model="shopEditFormData.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEditShop">确 定</el-button>
     </span>
    </el-dialog>
    <!--添加维修厂表单-->
    <el-dialog
        :title="title"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="closeClear">
      <el-form :model="shopAddFormData" status-icon :rules="shopAddFormRules" ref="shopEditRuleForm" label-width="100px">
        <el-form-item label="修理厂名称" prop="name">
          <el-input type="text" v-model="shopAddFormData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="修理厂地址" prop="address">
          <el-input type="text" v-model="shopAddFormData.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNum">
          <el-input type="text" v-model="shopAddFormData.phoneNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="text" v-model="shopAddFormData.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddShop">确 定</el-button>
     </span>
    </el-dialog>
    <!--删除维修厂信息-->
    <el-dialog
        title="维修厂信息删除"
        :visible.sync="deleteDialogVisible"
        width="50%"
    >
      <h3 align="center">确定删除该维修厂的信息吗？</h3>
      <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmdeleteShop">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "maintatinshop",
  data() {
    return {
      //删除的id
      deleteid:0,
      //查询条件
      query:"",
      //当前显示的页码
      currentPage: 1,
      //动态标题
      title:"",
      //总条数
      total: 0,
      //每页显示的记录
      pageSize: 5,
      //当前的记录数据
      tableData: [],
      //编辑弹框的显示或隐藏
      editDialogVisible:false,
      addDialogVisible: false,
      //删除的表单
      deleteDialogVisible:false,
      //编辑表单的数据
      shopEditFormData:{},
      shopAddFormData:{},
      //编辑表单的校验规则
      shopEditFormRules:{
        name:[
          {require:true,message:"名称不能为空",trigger:"blur"}
        ],
        address:[
          {require:true,message:"地址不能为空",trigger:"blur"},
          {min:5,max:12,message: "地址的长度必须为5~12",trigger: "blur"}
        ],
        phoneNum:[
          {require:true,message:"手机号不能为空",trigger:"blur"},
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
      },
      shopAddFormRules:{
        name:[
          {require:true,message:"名称不能为空",trigger:"blur"}
        ],
        address:[
          {require:true,message:"地址不能为空",trigger:"blur"},
          {min:5,max:12,message: "地址的长度必须为5~12",trigger: "blur"}
        ],
        phoneNum:[
          {require:true,message:"手机号不能为空",trigger:"blur"},
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
      },
    }
  },
  created() {
    this.initmaintainTable(this.currentPage,this.pageSize)
  },
  methods: {
    //删除修理厂信息
    deleteShop(shop){
      this.deleteDialogVisible=true;
      this.deleteid = shop.id;
    },
    //删除确定按钮
    confirmdeleteShop(){
      var that =this;
      this.$http.post(`/maintain/shop/deleteMaintainId/${this.deleteid}`).then(function (resp){
        if (resp.data.code===200){
          that.deleteDialogVisible=false;
        }
        that.initmaintainTable(that.currentPage,that.pageSize);
      })
    },
    //添加修理厂
    addShop(){
      this.addDialogVisible=true;
    },
    //添加确定按钮
    confirmAddShop(){
      var that =this;
      this.$http.put(`/maintain/shop/insertMaintain`,this.shopAddFormData).then(function (resp){
        if (resp.data.code===200){
          that.addDialogVisible=false;
        }
        that.initmaintainTable(that.currentPage,that.pageSize);
      })
    },
    //清空表单
    closeClear(){
      this.shopEditFormData={}
      this.$refs.shopEditRuleForm.resetFields();
      this.initmaintainTable(this.currentPage, this.pageSize)
    },
    // 加载用户信息界面
    initmaintainTable(currentPage,pageSize) {
      var that = this;
      this.$http.post(`/maintain/shop/findMaintainByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function (resp) {
        if (resp.data.code === 200) {
          that.tableData = resp.data.data.records
          that.total = resp.data.data.total
          console.log(resp.data.data.records);
        } else {
          that.$message.error("加载失败")
        }
      })
    },
    //当前页有多少条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.initmaintainTable(this.currentPage, this.pageSize)
    },
    //当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initmaintainTable(this.currentPage, this.pageSize)
    },
    //搜索
    search() {
      this.initmaintainTable(this.currentPage, this.pageSize)
    },
    //编辑
    editShop(shop) {
      this.editDialogVisible = true;
      this.shopEditFormData = shop;
      this.title= "修改"+shop.name+"信息";
    },
    //确认修改用户信息
    confirmEditShop() {
      var that = this;
      this.$refs['shopEditRuleForm'].validate((valid) => {
        if (valid) {
          this.$http.put("/maintain/shop/updateMaintain", this.shopEditFormData).then(function (resp) {
            if (resp.data.code ===200){
              that.$message.success(resp.data.msg);
            }else {
              that.$message.warning(resp.data.msg);
            }
            that.editDialogVisible = false;
            that.initmaintainTable(that.currentPage, that.pageSize);
          });
        }
      })
    }
  }
}
</script>

<style scoped>

</style>